<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-=1.0">
  <script src="./dist/qrcode.js"></script>
  <title>扫码查询</title>
</head>
<style>
  body {
    height: 100vh;
    /* 让 body 铺满整个视窗 */
    width: 100%;
    background: linear-gradient(to bottom, #165aaa, rgba(255, 255, 255));
  }

  .wrap {
    padding: 20px 15px 11px 15px;
  }

  .title {
    color: #fff;
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .content {
    background-color: #fff;
    border-radius: 7px;
    padding: 20px 6px 40px;
  }

  .remark {
    font-size: 15px;
    text-align: center;
  }

  .tips {
    text-align: center;
    color: #999;
    font-size: 10px;
    line-height: 20px;

  }

  .absolute {
    top: -12px;
  }

  .user-img {
    width: 22%;
    height: 21%;
    position: absolute;
    top: 8%;
    left: 9.5%;
    z-index: 999;
    margin-top: -10px;
  }

  .certificate-number {
    position: absolute;
    font-size: 13px;
    z-index: 999;
    left: 34%;
    top: 9%;
  }

  .user-name {
    position: absolute;
    font-size: 10px;
    z-index: 999;
    left: 34%;
    top: 15%;
  }

  .user-type {
    position: absolute;
    font-size: 9px;
    z-index: 999;
    left: 62.5%;
    top: 14.5%;
    width: 29%;
    display: inline-block;
    text-align: left;
  }

  .user-gender {
    position: absolute;
    font-size: 10px;
    z-index: 999;
    left: 34%;
    top: 23%;
    margin-top: -6px;
  }

  .user-project {
    position: absolute;
    font-size: 10px;
    z-index: 999;
    left: 62.5%;
    top: 23%;
    width: 30%;
    display: inline-block;
    text-align: left;
    margin-top: -6px;

  }

  .init-date {
    position: absolute;
    top: 33.5%;
    left: 9%;
    font-size: 11px;
    z-index: 999;
    margin-top: -6px;

  }

  .effective-date {
    position: absolute;
    top: 33.5%;
    left: 32%;
    font-size: 11px;
    z-index: 999;
    margin-top: -6px;

  }

  .review-date {
    position: absolute;
    top: 39.5%;
    left: 9%;
    font-size: 11px;
    z-index: 999;
    margin-top: -10px;

  }

  .unit {
    position: absolute;
    top: 39.5%;
    left: 32%;
    font-size: 11px;
    z-index: 999;
    margin-top: -10px;

  }

  .msg-code {
    width: 17%;
    height: 12.6%;
    position: absolute;
    right: 10%;
    top: 30.5%;
    z-index: 999;
    margin-top: -8px;
  }
</style>

<body>
  <div class="wrap">
    <div class="title">证书扫码结果</div>
    <div class="content">
      <div style="position: relative;">
        <img src="./dist/zyz1.jpg" mode="widthFix" width="100%">
        <img src="./dist/zyz2.jpg" mode="widthFix" width="100%">
        <div class="remark">备注：本证书应于2024-01-12前进行复审</div>
        <img class="user-img absolute" id="myImage" src="">
        <!-- 证号 -->
        <div class="certificate-number absolute"></div>
        <!-- 姓名 -->
        <div class="user-name absolute "></div>
        <!-- 作业类别 -->
        <div class="user-type absolute "></div>
        <!-- 性别 -->
        <div class="user-gender absolute "></div>
        <!-- 操作项目 -->
        <div class="user-project absolute "></div>
        <!-- 初始日期 -->
        <div class="init-date absolute "></div>
        <!-- 有效日期 -->
        <div class="effective-date absolute "></div>
        <!-- 应复审日期 -->
        <div class="review-date absolute "></div>
        <div class="unit absolute "></div>
        <div class="msg-code" id="qrcode">
        </div>
      </div>
    </div>


    <div class="tips" style="padding-top: 10px;">主办单位：中华人民共和国应急管理部</div>
    <div class="tips">承办单位：应急管理部干部培训学院（应急管理部党校）</div>
    <div class="tips">技术支持：浪潮软件股份有限公司</div>
    <div class="tips">备案号：京ICP备18056520号-2</div>
  </div>
</body>
<script>
  var queryString = window.location.search
  var urlParams = new URLSearchParams(queryString)
  var id = urlParams.get('id')
  var info = {
    fileCode: "A53010053321001660", // 档案编码
    certificateNumber: "T532101198503213213", // 证号
    name: "赵迟", // 姓名
    workCategory: "电工作业", // 作业类别
    gender: "男", // 性别
    userProject: "低压电工作业", // 操作项目
    initialIssueDate: "2017-10-30", // 初始日期
    validityPeriod: "2021-01-13至2027-01-12", // 有效日期
    avatar: "", // 用户头像
    nextReviewDate: "2024-01-12前", // 应复审日期
    remark: "备注：本证书应于2024-01-12前进行复审" // 备注
  }
  fetch('http://api.ynjov.com:8080/api/getWorkCertificatesDetail/' + id)
    .then(response => {
      
      if (!response.ok) {
        throw new Error('Network response was not ok')
      }
      return response.json()
    })
    .then(({ data }) => {
      
      info = data
      info.avatar = data.avatar ? data.avatar : './dist/heade_test.png'
      fillContent()
    })
    .catch(error => {
      console.error('Fetch error:', error)
    })
  function formatCertificateNumber(certNumber) {
    // 确保传入的证书编号是字符串类型
    certNumber = certNumber.toString()

    // 提取前七位和后四位
    let firstSeven = certNumber.slice(0, 7)
    let lastFour = certNumber.slice(-4)

    // 计算星号的数量
    let middleStars = certNumber.length - firstSeven.length - lastFour.length

    // 用星号替换中间的部分
    let middleHidden = '*'.repeat(middleStars)

    // 组合前七位、星号代替的中间部分和后四位
    let formattedNumber = firstSeven + middleHidden + lastFour

    return formattedNumber
  }
  // 用于动态填充内容的函数
  function fillContent() {
    document.querySelector('.certificate-number').innerText = formatCertificateNumber(info.certificateNumber)
    document.querySelector('.user-name').innerText = info.name
    document.querySelector('.user-type').innerText = info.workCategory
    document.querySelector('.user-gender').innerText = info.gender
    document.querySelector('.user-project').innerText = info.operationProject
    document.querySelector('.init-date').innerText = info.initialIssueDate
    document.querySelector('.effective-date').innerText = info.validityPeriod
    document.querySelector('.review-date').innerText = info.nextReviewDate + '前'
    document.querySelector('.remark').innerText = `备注：本证书应于${info.nextReviewDate}前进行复审`// 设置用户头像
    document.querySelector('.unit').innerText = info.issuingAuthority
    // 设置用户头像
    var userImgElement = document.querySelector('.user-img')
    // 用 info 对象中的图片 URL 替换原来的图片链接
    userImgElement.src = `http://api.ynjov.com:8080/${info?.avatar}?t=${Date.now()}`
    userImgElement.setAttribute("crossOrigin", 'Anonymous')
    // 获取当前页面的 URL
    var currentURL = `http://sys.ynjov.com/workres.html?id=${id}` // 二维码

    // 创建 QRCode 实例并将二维码添加到页面
    var qrcode = new QRCode(document.getElementById("qrcode"), {
      text: currentURL,
      width: 59,
      height: 59
    })
  }
</script>

</html>